<template>
	<view class="index">
		<template v-if="lst.length>0">
			<block v-for='(item,index) in lst' :key="index">
				<view class="item">
					<view class="title-hint">
						<view class="left-title">为你推荐</view>
						<view class="right-title" @tap="openRuleDescriptionCoupon()">使用说明</view>
					</view>
					<view class="info">
						<image :src="item.detailsArr[0]"
						 v-if="item.detailsArr[0]"
						 class="left-img"></image>
						<view class="right-block">
							<view class="info-title">
								{{item.coupon_name}}
							</view>
							<view class="info-nums">
								数量:{{item.count||0}}张
							</view>
							<view class="info-price">
								<view class="price">￥{{item.coupon_price/100}}</view>
								<view class="price-line">￥{{item.sales_volume/100}}</view>
							</view>
							<view class="btn-buy" @tap="buyClick(item)">立即购买</view>
						</view>
					</view>
				</view>
			</block>
		</template>
		<template v-if="lst.length==0">
			<view class="no-emty" style="font-size: 26rpx;color: #999;">暂无推荐优惠券</view>
		</template>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				lst: [],
			}
		},
		onLoad() {
			uni.removeStorageSync("coupon")	
		},
		onShow() {
			this.init()
		},
		methods: {
			init() {
				this.$http('coupon.getCouponList').then(res => {
					console.log('res', res)
					if (res.code == 200) {
						if (res.data.list.length > 0) {
							 this.lst=res.data.list
							for (let i = 0; i < this.lst.length; i++) {
								let arr = JSON.parse(this.lst[i].details)
								this.lst[i].detailsArr=arr
							}
						}
						
					}
				})
			},
			
			openRuleDescriptionCoupon(){
				uni.navigateTo({
					url: '/pages/ruleDescriptionCoupon/ruleDescriptionCoupon'
				})
			},
			buyClick(item) {
				uni.setStorageSync("coupon",item)
				uni.navigateTo({
					url: '/pages/mallCoupon/detail/detail'
				})
			}
		}
	}

</script>
<style>
	page {
		background: #F8F8F8;
	}

</style>
<style lang="scss" scoped>
	.index {
		padding-bottom: 20rpx;

		.item {
			margin: 16rpx;
			border-radius: 16rpx;
			background: #fff;
			padding: 24rpx 18rpx 24rpx 18rpx;

			.title-hint {
				display: flex;
				align-items: center;

				.left-title {
					flex: auto;
					font-size: 32rpx;
					font-weight: bold;
				}

				.right-title {
					flex: none;
					border-radius: 32rpx;
					background-color: #E8E6F3;
					padding: 12rpx 24rpx;
					font-size: 26rpx;
					text-align: center;
					color: #8C85B1;
				}
			}

			.info {
				display: flex;
				margin-top: 24rpx;

				.left-img {
					width: 240rpx;
					height: 240rpx;
					flex: none;
				}

				.right-block {
					flex: auto;
					font-size: 28rpx;
					margin-left: 24rpx;

					.info-title {
						font-weight: 500;
					}

					.info-nums {
						margin-top: 24rpx;
						color: #BABABA;
						margin-top: 14rpx;
					}

					.info-price {
						margin-top: 24rpx;
						display: flex;
						align-items: center;

						.price {
							font-size: 28rpx;
							color: #BF6C74;
						}

						.price-line {
							margin-left: 14rpx;
							color: #BABABA;
							text-decoration: line-through;
						}

					}

					.btn-buy {
						display: inline-block;
						margin-top: 24rpx;
						border-radius: 32rpx;
						background-color: #8D7FBD;
						padding: 12rpx 24rpx;
						font-size: 26rpx;
						text-align: center;
						color: #FEF8FF;
					}
				}
			}
		}
	}

</style>

